<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('维修保养记录列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>记录日期：</label>
                            <input type="text" class="time-input" id="beginRecordDate" placeholder="开始时间"
                                   name="params[beginRecordDate]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endRecordDate" placeholder="结束时间"
                                   name="params[endRecordDate]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchStatement()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>


        <div class="col-sm-12 select-table table-striped echarts" id="echarts-pie-chart">
            <!--            <table id="bootstrap-table"></table>-->
<!--            <div class="echarts" id="echarts-pie-chart" th:height="100"></div>-->

        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script th:inline="javascript">
    // var editFlag = [[${@permission.hasPermi('asset:maintenanceRecord:edit')}]];
    // var cancelFlag = [[${@permission.hasPermi('asset:maintenanceRecord:cancel')}]];
    // var maintenanceTypeData = [[${@dict.getType('maintenance_type')}]];
    // var maintenanceContentData = [[${@dict.getType('maintenance_content')}]];
    // var prefix = ctx + "asset/maintenanceRecord";


    function initDate() {
        // 获取当前日期
        var today = new Date();

// 获取当前日期的前30天
        var startDate = new Date();
        startDate.setDate(today.getDate() - 30);

// 将日期转换为字符串格式
        var startDateString = startDate.toISOString().substring(0, 10);
        var todayString = today.toISOString().substring(0, 10);

// 获取日期选择器元素
        var beginDateInput = document.getElementById("beginRecordDate");
        var endDateInput = document.getElementById("endRecordDate");

// 将最小日期设置为开始日期
        beginDateInput.setAttribute("min", startDateString);
        endDateInput.setAttribute("min", startDateString);

// 将最大日期设置为今天
        beginDateInput.setAttribute("max", todayString);
        endDateInput.setAttribute("max", todayString);

// 将默认时间设置为开始日期到今天
        beginDateInput.value = startDateString;
        endDateInput.value = todayString;


    }

    var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));



    var formData = {
        "params": {
            "beginRecordDate": "",
            "endRecordDate":""
        }
    }

    $(function () {


        initDate();
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title: {
                text: '固定资产维修记录表',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                // data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            calculable: true,
            series: [
                {
                    name: '维修类型',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '60%'],
                    data: [
                        // {value:335, name:'直接访问'},
                        // {value:310, name:'邮件营销'},
                        // {value:234, name:'联盟广告'},
                        // {value:135, name:'视频广告'},
                        // {value:1548, name:'搜索引擎'}
                    ],
                    label: {
                        formatter: '{b}: {d}% ({c})' // 显示数据名称、百分比、和数值
                    }
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);
        beginRecordDate = $('#beginRecordDate').val();
       endRecordDate= $('#endRecordDate').val();

       formData.params.beginRecordDate=beginRecordDate;
       formData.params.endRecordDate=endRecordDate;

        console.log(formData)

        init(pieChart, formData);
    });

    function init(pieChart, formData) {
        $.post('/asset/maintenanceRecord/initMaintenanceStatement', formData, function (data) {
            if (data.code == 0) {
                // 将数据转换成ECharts所需的格式
                var seriesData = [];
                for (var i = 0; i < data.data.length; i++) {
                    seriesData.push({
                        value: data.data[i].count,
                        name: data.data[i].maintenanceContent
                    });
                }
                console.log(seriesData)
                // 更新ECharts图表
                var pieoption = {
                    // 设置图表配置项
                    series: [{
                        data: seriesData
                    }]
                };
                pieChart.setOption(pieoption);
            }
        }, 'json');
    }


    function searchStatement() {

        console.log(1)
        var beginRecordDate = $('#beginRecordDate').val();
        var endRecordDate = $('#endRecordDate').val();

        formData.params.beginRecordDate = beginRecordDate;
        formData.params.endRecordDate = endRecordDate;


        init(pieChart, formData)

    }
</script>
</body>
</html>